<template>
  <div class="index">
    <div class="title-content">
      <div class="title-left">
        <div class="left-img">
          <img :src="userInfo.avatar" alt="" v-if="userInfo.avatar" />
          <svg-icon class="user-icon" name="portrait" v-else></svg-icon>
        </div>
        <div class="left-text">
          <div class="text1">{{ userInfo.nickName }}</div>
          <div class="text2">
            <span v-if="userInfo.position">{{ userInfo.position }}&nbsp;&nbsp;</span>
          </div>
          <div class="text3">
            <span>{{ userInfo.companyName }}</span>
          </div>
        </div>
      </div>
      <div class="title-right">
        <div style="margin: 5px 0;" @click="$router.push('/message')">
          <van-badge :content="msgNum">
            <svg-icon class=" icon-notice" name="notice"></svg-icon>
          </van-badge>
        </div>
        <my-switch v-model="checked" text="个人|全部" @change="changeFn"></my-switch>
      </div>
    </div>
    <div class="index-card">
      <!-- 第一个card -->
      <div class="card index-card-item">
        <div class="card-title">
          <span></span>
          <span>客户数据</span>
          <!-- <img src="@/assets/question.png" alt="" @click="showPopup(0)" /> -->
          <svg-icon class="question-icon" name="question" @click="showPopup(0)"></svg-icon>
        </div>
        <div class="card-box">
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(customerOutForm.totalCnt) }}
            </div>
            <div class="text">客户总数</div>
          </div>
          <div class="card-box-item divide-line">
            <div class="data">
              {{ setThousandsMark(customerOutForm.tdCnt) }}
            </div>
            <div class="text">今日新增</div>
          </div>
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(customerOutForm.tdFollowUpCustomer) }}
            </div>
            <div class="text">今日跟进</div>
          </div>
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(customerOutForm.tdNetCnt) }}
            </div>
            <div class="text">今日净增</div>
          </div>
          <div class="card-box-item divide-line">
            <div class="data">
              {{ setThousandsMark(customerOutForm.tdLostCnt) }}
            </div>
            <div class="text">今日流失</div>
          </div>
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(customerOutForm.ydNewApplyCnt) }}
            </div>
            <div class="text">昨日发送申请</div>
          </div>
        </div>
      </div>
      <!-- 第二个card -->
      <div class="card index-card-item">
        <div class="card-title">
          <span></span>
          <span>客群数据</span>
          <!-- <img src="@/assets/question.png" alt="" @click="showPopup(1)" /> -->
          <svg-icon class="question-icon" name="question" @click="showPopup(1)"></svg-icon>
        </div>
        <div class="card-box">
          <div class="card-box-item ">
            <div class="data">
              {{ setThousandsMark(groupOutForm.totalCnt) }}
            </div>
            <div class="text">客群总数</div>
          </div>
          <div class="card-box-item divide-line">
            <div class="data">
              {{ setThousandsMark(groupOutForm.tdGroupAddCnt) }}
            </div>
            <div class="text">今日新增客群</div>
          </div>
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(groupOutForm.tdGroupDissolveCnt) }}
            </div>
            <div class="text">今日解散客群</div>
          </div>
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(groupOutForm.memberTotalCnt) }}
            </div>
            <div class="text">客群成员总数</div>
          </div>
          <div class="card-box-item divide-line">
            <div class="data">
              {{ setThousandsMark(groupOutForm.tdMemberAddCnt) }}
            </div>
            <div class="text">今日新增成员</div>
          </div>
          <div class="card-box-item">
            <div class="data">
              {{ setThousandsMark(groupOutForm.tdMemberQuitCnt) }}
            </div>
            <div class="text">今日退出成员</div>
          </div>
        </div>
      </div>
      <!-- 第三个card -->
      <div class="card dynamics">
        <div class="card-title">
          <span></span>
          <span>企业动态</span>
          <div v-if="dynamicsOutList.length" class="right" @click="searchAll">
            查看全部
            <svg-icon class="right-icon" name="right"></svg-icon>
          </div>
        </div>
        <div class="card-box">
          <Empty v-if="!dynamicsOutList.length" />
          <div class="enterprise-dynamics" v-if="dynamicsOutList.length">
            <div class="dynamics-item" v-for="(item, index) in dynamicsOutList" :key="index">
              <div class="dynamics-left">
                <div class="top">
                  <span :class="item.operatorType === 1 ? 'customer' : 'staff'">
                    {{ item.operatorType === 1 ? '客户' : '员工' }}
                  </span>
                  <span>{{ item.operatorName }}</span>
                </div>
                <div class="bottom">
                  <span
                    :class="
                      item.action === '删除员工' || item.action === '解散群聊' || item.action === '退出群聊'
                        ? 'unnomal'
                        : 'nomal'
                    "
                  >
                    {{ item.action }}&nbsp;&nbsp;
                  </span>
                  <span>{{ item.operatoredObjectName }}</span>
                </div>
              </div>
              <div class="dynamics-right">
                <span>
                  {{ item.trajectoryType === 1 ? '客户动态' : item.trajectoryType === 5 ? '客群动态' : '' }}
                </span>
                <!-- <span>2022-04-06 08:25:35</span> -->
                <span>{{ item.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 我的任务 -->
      <div class="card my-task">
        <div class="card-title mb10">
          <span></span>
          <span>我的任务</span>
          <div class="right" @click="$router.push('/historyTask?type=history')">
            查看历史任务
            <svg-icon class="right-icon" name="right"></svg-icon>
          </div>
        </div>
        <MyTask />
      </div>
    </div>
    <Loading :isLoad="isLoad" />

    <!-- 弹出层 -->
    <van-overlay :show="questionShow" z-index="999">
      <div class="popup">
        <div class="popup-content">
          <div class="pop-content">
            <div class="pop-bg-top"></div>
            <div class="pop-bg-bottom"></div>
            <div class="pop-text">
              <div class="pop-title">数据指标</div>
              <div class="pop-item" v-for="(item, index) in questionData" :key="index">
                <div class="item-top">{{ item.title }}</div>
                <div class="item-bottom">{{ item.content }}</div>
              </div>
              <div class="pop-button">
                <div @click="questionShow = false">确定</div>
              </div>
            </div>
          </div>
          <!-- <img src="@/assets/pop-close.png" alt="" @click="popupClose" /> -->
          <svg-icon class="pop-close-icon" name="pop-close" @click="popupClose" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import MySwitch from '@/components/Switch'
import { getCustomerAnalysisData, getGroupAnalysisData, getCompanyDynamicsData } from '@/api/index'
import { getNum } from '@/views/message/api.js'
import Loading from '@/components/Loading.vue'
import MyTask from '@/views/myTask/index.vue'
export default {
  name: '',
  components: { MySwitch, Loading, MyTask },
  data() {
    return {
      checked: true,
      questionShow: false,
      questionData: {},
      dynamicsList: [{}],
      userInfo: { avatar: '', nickName: '', position: '', companyName: '' },
      //   loading: false,
      customerForm: {
        dataScope: false,
        // Authorization: "",
      },
      customerOutForm: {},
      groupOutForm: {},
      dynamicsFrom: {
        trajectoryType: '',
        dataScope: false,
        pageSize: 5,
        pageNum: 1,
      },
      dynamicsOutList: [],
      isLoad: false,

      msgNum: 0,
      showTask: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    // this.customerForm.Authorization = sessionStorage.getItem("token");
    this.getNum()
    this.getCustomerData()
    this.getGroupData()
    this.getDynamicsData()
  },
  mounted() {
    this.userInfo.avatar = sessionStorage.getItem('avatar')
    this.userInfo.companyName = sessionStorage.getItem('companyName')
    this.userInfo.nickName = sessionStorage.getItem('nickName')
      ? sessionStorage.getItem('nickName')
      : sessionStorage.getItem('userName')
    this.userInfo.position = sessionStorage.getItem('position')
  },
  methods: {
    // 消息通知数量
    getNum() {
      getNum().then((res) => {
        this.msgNum = res.data
      })
    },
    changeFn() {
      this.checked = !this.checked
      this.isLoad = true
      this.customerForm.dataScope = !this.checked
      this.dynamicsFrom.dataScope = !this.checked
      this.getCustomerData()
      this.getGroupData()
      this.getDynamicsData()
    },
    showPopup(i) {
      let questionList = [
        [
          {
            title: '【客户总数】',
            content: '当前员工权限范围内的全部客户数量(含重复)',
          },
          {
            title: '【今日新增】',
            content: '当前员工权限范围内今日添加的客户数(含重复 及流失)',
          },
          {
            title: '【今日跟进】',
            content: '当前员工权限范围内今日添加的客户数(含重复及流失)',
          },
          {
            title: '【今日净增】',
            content: '当前员工权限范围内今日添加的客户数(不含重复及流失)',
          },
          {
            title: '【今日流失】',
            content: '当前员工权限范围内的流失的全部客户数量',
          },
          {
            title: '【昨日发送申请】',
            content: '当前员工数权限范围内主动向客户发起的申请数',
          },
        ],
        [
          {
            title: '【客户总数】',
            content: '当前员工权限范围内的全部客群数量',
          },
          {
            title: '【今日新增客群】',
            content: '当前员工权限范围内今日创建的客群数',
          },
          {
            title: '【今日解散客群】',
            content: '当前员工权限范围内今日创建的客群数',
          },
          {
            title: '【客群成员总数】',
            content: '当前员工权限范围内客群成员的总数(含员工)',
          },
          {
            title: '【今日新增成员】',
            content: '当前员工权限范围内今日新增客群成员数(含成员)',
          },
          {
            title: '【今日退出成员】',
            content: '当前员工数权限范围内今日退出客群成员数(含员工)',
          },
        ],
      ]
      this.questionData = questionList[i]
      this.questionShow = true
    },
    popupClose() {
      this.questionShow = false
    },
    // 查看全部
    searchAll() {
      this.$router.push({
        name: 'dynamics',
        query: {
          dataScope: this.dynamicsFrom.dataScope,
        },
      })
    },
    // 获取客户分析数据
    getCustomerData() {
      getCustomerAnalysisData(this.customerForm).then((res) => {
        if (res.code === 200) {
          this.customerOutForm = res.data
        }
        this.isLoad = false
      })
    },
    // 获取客群分析数据
    getGroupData() {
      getGroupAnalysisData(this.customerForm).then((res) => {
        if (res.code === 200) {
          this.groupOutForm = res.data
        }
        this.isLoad = false
      })
    },
    // 获取企业轨迹
    getDynamicsData() {
      getCompanyDynamicsData(this.dynamicsFrom).then((res) => {
        if (res.code === 200) {
          this.dynamicsOutList = res.rows
          // this.dynamicsOutList = [
          //   {
          //     operatorType: 1,
          //     operatorName: 'asefwf',
          //     action: 'sedf',
          //     operatoredObjectName: 'sdsss',
          //     trajectoryType: 1,
          //     createTime: '25169efewfew',
          //   },
          // ]
          this.dynamicsOutList.forEach((item) => {
            // let content = "客户:张三 推出群聊:优惠卷群";
            // item.contentList = this.dellString();
            item.operatoredObjectType =
              item.operatoredObjectType === 1 ? '客户' : item.operatoredObjectType === 2 ? '员工' : '客群'
          })
        }
      })
    },

    // 添加千分位符
    setThousandsMark(num) {
      if (num) {
        num = num + ''
        let reg = /(?!^)(?=(\d{3})+$)/g
        return num.replace(reg, ',')
      } else {
        return 0
      }
    },
  },
}
</script>

<style lang="less" scoped>
.index {
  position: relative;
  background: linear-gradient(180deg, #eaf5ff 0%, rgba(253, 253, 253, 0) 100%);
  background-size: 100% 256px;
  background-repeat: no-repeat;
  padding: 15px 20px 0;
}
// 弹出层
.popup {
  width: 100%;
  height: 100%;
  // position: absolute;
  // top: 0;
  // left: 0;
  // z-index: 999;
  // background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  .popup-content {
    width: 82.66%;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
    .pop-content {
      position: relative;
      width: 100%;
      // height: 261px;
      // width: 310px;
      height: 528px;
      background: #ffffff;
      border-radius: 12px 12px 12px 12px;
      margin-bottom: 31px;
      .pop-bg-top {
        width: 100%;
        height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        background: linear-gradient(360deg, rgba(0, 121, 222, 0) 0%, rgba(0, 121, 222, 0.8) 100%);
        opacity: 0.16;
        filter: blur(10px);
      }
      .pop-bg-bottom {
        width: 65%;
        height: 160px;
        position: absolute;
        bottom: 0;
        right: 0;
        background: linear-gradient(293deg, #e8f3fc 0%, rgba(232, 243, 252, 0) 100%);
        opacity: 0.7;
        filter: blur(41px);
      }
      .pop-text {
        width: 100%;
        height: 100%;
        padding: 20px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        .pop-title {
          text-align: center;
          font-size: 18px;
          color: #222222;
          line-height: 24px;
          margin-bottom: 20px;
        }
        .pop-item {
          .item-top {
            font-size: 13px;
            color: #222222;
            line-height: 14px;
            margin-bottom: 6px;
          }
          .item-bottom {
            width: 265px;
            font-size: 13px;
            color: #999999;
            line-height: 21px;
            margin-bottom: 12px;
          }
        }
        .pop-button {
          width: 100%;
          display: flex;
          justify-content: center;
          div {
            width: 236px;
            height: 40px;
            background: #0079de;
            border-radius: 10px 10px 10px 10px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 16px;
            margin-top: 13px;
            font-weight: 600;
          }
        }
      }
    }
    .pop-close-icon {
      cursor: pointer;
      // font-size: 26px;
      width: 26px;
      height: 26px;
    }
  }
}
.title-content {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
  .title-left {
    display: flex;
    align-items: center;
    .left-img {
      width: 54px;
      height: 54px;
      box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.04);
      opacity: 1;
      border: 2px solid #ffffff;
      border-radius: 27px;
      margin: 4px;
      margin-right: 12px;
      overflow: hidden;
      text-align: center;
      flex-shrink: 0;
      //   img {
      //     width: 100%;
      //     height: 100%;
      //   }
      .user-icon {
        width: 100%;
        height: 100%;
        color: #0079de;
        opacity: 0.8;
      }
    }
    .left-text {
      .text1 {
        font-size: 16px;
        color: #3d3d3d;
        line-height: 25px;
        font-weight: 600;
      }
      .text2 {
        span {
          line-height: 25px;
          font-size: 13px;
          color: #9f9f9f;
        }
      }
      .text3 {
        //   width: 200px;
        //   white-space: nowrap;
        //   overflow: hidden;
        //   text-overflow: ellipsis;
        span {
          line-height: 25px;
          font-size: 12px;
          color: #0079de;
        }
      }
    }
  }
  .title-right {
    text-align: right;
    .icon-notice {
      font-size: 20px;
      color: #0079de;
    }
  }
}
.index-card {
  margin-top: 18px;
  margin-bottom: 58px;
  .card {
    background: #ffffff;
    box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.04);
    border-radius: 8px 8px 8px 8px;
    position: relative;
    margin-bottom: 8px;
    overflow: hidden;
    .card-title {
      display: flex;
      align-items: center;
      height: 45px;
      padding: 10px 17px;
      background: linear-gradient(60deg, rgba(0, 214, 149, 0.3) 0%, rgba(255, 255, 255, 0.3) 180%);

      span:nth-child(1) {
        display: block;
        width: 4px;
        height: 14px;
        background: #00d695;
        border-radius: 1px 1px 1px 1px;
        margin-right: 7px;
      }
      span:nth-child(2) {
        font-size: 16px;
        color: #222222;
        line-height: 22px;
        font-weight: 600;
      }
      .question-icon {
        font-size: 18px;
        margin-left: 6px;
      }
      .right {
        font-size: 12px;
        color: #b5b8c0;
        display: flex;
        flex: auto;
        align-items: center;
        justify-content: flex-end;
        .right-icon {
          width: 18px;
          height: 18px;
        }
      }
    }
  }
  .index-card-item {
    .card-box {
      background: #ffffff;
      display: flex;
      flex-wrap: wrap;
      padding-top: 24px;
      .card-box-item {
        width: 33.3%;
        text-align: center;
        margin-bottom: 20px;
        .data {
          font-size: 18px;
          font-weight: 500;
          color: #222222;
          line-height: 25px;
          margin-bottom: 4px;
        }
        .text {
          font-size: 12px;
          color: #b5b8c0;
          line-height: 17px;
        }
      }
      .divide-line {
        border-left: 1px solid #fafafa;
        border-right: 1px solid #fafafa;
      }
    }
  }
  .index-card-item:nth-child(2) {
    .card-title {
      background: linear-gradient(60deg, rgba(250, 114, 22, 0.3), rgba(255, 255, 255, 0.3) 180%);
      span:nth-child(1) {
        background: #fa7216 !important;
      }
    }
  }
  //  第三个card
  .dynamics {
    .card-title {
      background: linear-gradient(60deg, rgba(0, 121, 222, 0.3), rgba(255, 255, 255, 0.3) 180%);
      span:nth-child(1) {
        background: #0079de;
      }
    }
    .card-box {
      position: relative;
      bottom: 0;
      width: 100%;
      background: #ffffff;
      box-shadow: 0px 2px 6px -3px rgba(0, 0, 0, 0.04);
      border-radius: 0px 0px 8px 8px;
      display: flex;
      flex-wrap: wrap;
      // padding-top: 24px;
      .enterprise-dynamics {
        padding: 30px 16px 8px 16px;
        width: 100%;
        .dynamics-item {
          border-bottom: 1px solid #f1f1f1;
          display: flex;
          justify-content: space-between;
          padding-bottom: 9px;
          margin-bottom: 15px;
          .dynamics-left {
            .top {
              margin-bottom: 7px;
              span:nth-child(1) {
                display: inline-block;
                max-width: 80px;
                padding: 0 2px;
                //   height: 18px;
                border-radius: 3px 3px 3px 3px;
                font-size: 10px;
                line-height: 18px;
                text-align: center;
                margin-right: 8px;
              }
              .customer {
                background: #ecf5ff;
                color: #0079de;
              }
              .staff {
                background: #effffa;
                color: #00d695;
              }
              span:nth-child(2) {
                font-size: 14px;
                color: #222222;
                line-height: 20px;
                font-weight: 600;
              }
            }
            .bottom {
              span {
                font-size: 12px;
                color: #666666;
                line-height: 17px;
              }
              .nomal {
                color: #0079de;
              }
              .unnomal {
                color: #e34d59;
              }
            }
          }
          .dynamics-right {
            display: flex;
            flex-direction: column;
            text-align: right;
            span {
              font-size: 12px;
              line-height: 17px;
            }
            span:nth-child(1) {
              color: #666666;
              margin-bottom: 9px;
            }
            span:nth-child(2) {
              color: #999999;
            }
          }
        }
      }
    }
  }

  // 我的任务
  .my-task {
    background: none;
  }
}
</style>
